<script setup lang='ts'>
import { useTaxPlanning } from "./hook/TaxPlanning";
import { PureTableBar } from "@/components/RePureTableBar";
const {
  SGF,
  SGFS,
  SHJE,
  columns,
  loading,
  dataList,
  resultNav,
  btnloading,
  pagination,
  DateValue,
  loadings,
  dataLists,
  FormConten,
  paginations,
  DateVisible,
  DialogState,
  DialogVisible,
  Buy,
  TwoDecimal,
  close_date,
  sure_date,
  myvalidator,
  sure_Subscribe,
  close_Subscribe,
  handleSizeChange,
  handleCurrentChange,
  handleSizeChanges,
  handleCurrentChanges
} = useTaxPlanning();
</script>

<template>
  <div class="main">
    <!-- 税务筹划 -->
    <el-tabs type="border-card">
      <el-tab-pane label="基金分红列表">
        <PureTableBar title="" class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
              size="small" max-height="650" :data="dataList" :columns="columns" :checkList="checkList"
              :pagination="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
              <template #operation="{ row }">
                <el-button type="primary" text size="small" @click="Buy(row, 1)"> 购买 </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
      <el-tab-pane label="我的基金">
        <PureTableBar title="" class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loadings"
              size="small" max-height="650" :data="dataLists" :columns="columns" :checkList="checkList"
              :pagination="paginations" @size-change="handleSizeChanges" @current-change="handleCurrentChanges"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
              <template #operation="{ row }">
                <el-button type="primary" :disabled="row.statu === 5" text size="small" @click="Buy(row, row.statu)">
                  {{
                    row.statu == 2 ? '基金分红' :
                    row.statu == 3 ? '基金赎回' : '税务筹划分析'
                  }}
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
    </el-tabs>


    <ReDialog :width="350" :height="170" :models="DateVisible" @Closes="close_date()">
      <template #header>
        <h2 style="text-align: center;">
          {{ DialogState == 1 ? "购买日期" : "赎回日期" }}
        </h2>
      </template>
      <template #main>
        <div class="h-full flex justify-center items-center">
          <el-date-picker v-model="DateValue" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            autocomplete="off" />
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="sure_date()"> 确定 </el-button>
        <el-button @click="close_date()"> 取消 </el-button>
      </template>
    </ReDialog>

    <ReDialog :width="750" :height="500" :models="DialogVisible" @Closes="close_Subscribe()">
      <template #header>
        <h2 style="text-align: center;">
          {{
            DialogState == 1 ? '申购' :
            DialogState == 2 ? '基金分红' :
              DialogState == 3 ? '基金赎回' : '税务筹划分析'
          }}

        </h2>
      </template>
      <template #main>
        <div class="tax_form" v-if="DialogState == 1">
          <p class="tx_form_tips">基金信息</p>
          <div class="tax__content">
            <dl class="">
              <dd>基金名称：</dd>
              <dd>{{ FormConten.fundName }}</dd>
            </dl>
            <dl class="">
              <dd>单位净值：</dd>
              <dd>{{ FormConten.nav }}</dd>
            </dl>
          </div>
          <p class="tx_form_tips">确认购买金额</p>
          <div class="tax__content">
            <dl class="">
              <dd>购买金额：</dd>
              <dd>
                <el-input-number v-model="FormConten.subscribeMoney" size="small" autocomplete="off" class="myinputs"
                  :min="100" :max="50000000" :step="1" @blur="myvalidator(FormConten.subscribeMoney)" />元
                <!-- <el-input style="width:150px" size="small" />元 -->
              </dd>
            </dl>
            <dl class="">
              <dd>申购率：</dd>
              <dd>0.15%</dd>
            </dl>
            <dl class="">
              <dd>申购费：</dd>
              <dd>{{ SGF }}</dd>
            </dl>
          </div>
          <p class="tx_form_tips">交易信息</p>
          <div class="tax__content">
            <dl class="">
              <dd class="type_price">
                钱包支付
              </dd>
              <dd></dd>
            </dl>
            <dl class="">
              <dd>交易密码：</dd>
              <dd>
                <el-input v-model.trim="FormConten.dealPassword" maxlength="6" autocomplete="off" style="width:150px"
                  type="password" size="small" />
              </dd>
            </dl>
            <dl class="">
              <dd>申购日期：</dd>
              <dd>{{ DateValue }}
              </dd>
            </dl>
          </div>
        </div>
        <!-- -------------------------- -->
        <!-- 基金分红 -->
        <div class="tax_form" v-else-if="DialogState == 2">
          <p class="tx_form_tips">基金信息</p>
          <div class="tax__content">
            <dl class="">
              <dd>基金名称：</dd>
              <dd>{{ FormConten.fundName }}</dd>
            </dl>
            <dl class="">
              <dd>单位净值：</dd>
              <dd>{{ FormConten.nav }}</dd>
            </dl>
            <!-- <dl class="">
                    <dd>基金类型：</dd>
                    <dd>基金类型</dd>
                  </dl> -->
            <dl class="">
              <dd>申购份额：</dd>
              <dd>{{ FormConten.subscriptionShare }}</dd>
            </dl>
            <dl class="">
              <dd>申购费：</dd>
              <dd>{{ FormConten.subscriptionMoney }}</dd>
            </dl>
          </div>
          <p class="tx_form_tips">基金分红</p>
          <div class="tax__content">
            <dl class="">
              <dd>每份基金分红：</dd>
              <dd>{{ FormConten.dividendPerFund }}</dd>
            </dl>
            <dl class="">
              <dd>基金份额：</dd>
              <dd>{{ FormConten.fundShare }}</dd>
            </dl>
            <dl class="">
              <dd>基金分红所得：</dd>
              <dd>{{ FormConten.fundDividendIncome }}</dd>
            </dl>
          </div>
        </div>
        <!-- 赎回 -->
        <div class="tax_form" v-else-if="DialogState == 3">
          <p class="tx_form_tips">基金信息</p>
          <div class="tax__content">
            <dl class="">
              <dd>基金名称：</dd>
              <dd>{{ FormConten.fundName }}</dd>
            </dl>
            <dl class="">
              <dd>单位净值：</dd>
              <dd>{{ FormConten.nav }}</dd>
            </dl>
            <dl class="">
              <dd>申购份额：</dd>
              <dd>{{ FormConten.subscriptionShare }}</dd>
            </dl>
          </div>
          <p class="tx_form_tips">基金分红</p>
          <div class="tax__content">
            <div class="tax__con_left">
              <dl>
                <dd>赎回份额：</dd>
                <dd>
                  <el-input-number size="small" v-model="FormConten.share" style="width:120px" class="myinputs"
                    :step="1" />
                </dd>
              </dl>
              <dl>
                <dd>赎回金额：</dd>
                <dd><el-input size="small" disabled style="width:120px" v-model="SHJE" /> </dd>
              </dl>
              <dl>
                <dd>赎回费用：</dd>
                <dd>
                  <el-input-number size="small" v-model="FormConten.charge" style="width:120px" autocomplete="off"
                    class="myinputs" :min="100" :max="50000000" :step="1" />
                </dd>
              </dl>
              <dl>
                <dd>交易密码：</dd>
                <dd>
                  <el-input v-model.trim="FormConten.dealPassword" maxlength="6" style="width:120px" type="password"
                    autocomplete="off" size="small" />
                </dd>
              </dl>
              <dl>
                <dd>赎回日期：</dd>
                <dd>{{ DateValue }}</dd>
              </dl>
            </div>
            <div class="tax__con_right">
              <table border class="tr_tab">
                <tr>
                  <th>持有年限（Y）</th>
                  <th>赎回费率</th>
                </tr>
                <tr>
                  <td>Y＜7天</td>
                  <td>1.5%</td>
                </tr>
                <tr>
                  <td>7天≤Y＜30天</td>
                  <td>0.75%</td>
                </tr>
                <tr>
                  <td>30天≤Y＜1年</td>
                  <td>0.5%</td>
                </tr>
                <tr>
                  <td>1年≤Y＜2年</td>
                  <td>0.25%</td>
                </tr>
                <tr>
                  <td>2年≤Y</td>
                  <td>0</td>
                </tr>
              </table>
              <p class="tab_tips">赎回费用=赎回金额*赎回费率</p>
            </div>
          </div>
        </div>
        <!-- 税务筹划分析 -->
        <div class="tax_form" v-else-if="DialogState == 4">
          <p class="tx_form_tips">基金信息</p>
          <div class="tax__content">
            <dl class="">
              <dd>基金名称：</dd>
              <dd>{{ FormConten.fundName }}</dd>
            </dl>
            <dl class="">
              <dd>申购金额：</dd>
              <dd>{{ FormConten.subscribeMoney }}元</dd>
            </dl>
            <dl class="">
              <dd>申购费用：</dd>
              <dd>{{ FormConten.purchasedPrice }}元</dd>
            </dl>
            <dl class="">
              <dd>赎回金额：</dd>
              <dd>{{ FormConten.redemptionMoney }}元</dd>
            </dl>
            <dl class="">
              <dd>赎回费用：</dd>
              <dd>{{ FormConten.redemptionCharges }}元</dd>
            </dl>
          </div>
          <p class="tx_form_tips">税务筹划分析</p>
          <div class=" tax__tent">
            <dl class="">
              <dd>本应缴纳税：</dd>
              <dd><el-input type="number" v-model="FormConten.shouldHavePaidTax"
                  @blur="TwoDecimal(FormConten.shouldHavePaidTax, 'shouldHavePaidTax')" /></dd>
            </dl>
            <dl class="">
              <dd>账面亏损：</dd>
              <dd><el-input type="number" v-model="FormConten.bookLoses"
                  @blur="TwoDecimal(FormConten.bookLoses, 'bookLoses')" />
              </dd>
            </dl>
            <dl class="">
              <dd>实际纳税：</dd>
              <dd><el-input type="number" v-model="FormConten.actualTaxPayment"
                  @blur="TwoDecimal(FormConten.actualTaxPayment, 'actualTaxPayment')" /></dd>
            </dl>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="sure_Subscribe(DialogState)" :loading="btnloading"
          v-if="!FormConten.subscriptionMoney"> 确定
        </el-button>
        <el-button v-if="!FormConten.subscriptionMoney" @click="close_Subscribe()"> 取消 </el-button>
      </template>
    </ReDialog>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

:deep(.list_hei) {
  height: 100%;

  .flex {
    display: none;
  }
}

:deep(.pure-table) {
  height: 100%;
}

.tax_form {
  text-align: left;
  font-size: 14px;

  .tx_form_tips {
    padding: 5px;
    background-color: #ccc;
  }

  .tax__content {
    padding: 10px 5px;
    display: flex;
    flex-wrap: wrap;

    dl {
      width: 60%;
      display: flex;
      line-height: 28px;
      margin-right: 10px;

      dd {
        display: flex;
        align-items: center;


        &:nth-child(1) {
          width: 120px;
        }

        &:nth-child(2) {
          width: 200px;
        }
      }
    }

    .type_price {
      position: relative;
      left: 15px;
    }

    .type_price::before {
      content: "";
      position: absolute;
      left: -15px;
      width: 12px;
      height: 12px;
      border: 3px solid #409eff;
      border-radius: 50%;
    }

    .tax__con_left,
    .tax__con_right {
      width: 50%;
    }

    .tab_tips {
      line-height: 32px;
    }

    .tr_tab {
      width: 60%;

      tr {

        td,
        th {
          border: 1px solid #ccc;
        }
      }
    }
  }

  .tax__tent {
    width: 45%;
    margin: 0 auto;

    dl {
      display: flex;
      width: 100%;
      text-align: center;
      margin: 10px 0;

      // dd {
      //   &:nth-child(1) {
      //     flex: 1;
      //   }

      //   &:nth-child(2) {
      //     flex: 2;
      //   }
      // }
      dd {
        &:nth-child(1) {
          width: 100px;
        }

        &:nth-child(2) {
          width: 200px;
        }
      }


    }
  }
}

:deep(.myinputs) {
  .el-input__wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  .el-input-number__increase,
  .el-input-number__decrease {
    display: none;
  }
}

:deep(.el-dialog__footer) {
  text-align: center;
}
</style>
